<template>
  <div class="articleOuter">
    <HeaderPage :headerNavindex="2" />

    <div class="article" v-loading="loading">
      <el-scrollbar height="630px">
        <div class="article_r">
          <div class="article_r_item" v-for="item in articleData" :key="item._id" @click="toDetail(item._id)">
            <div class="article_r_item_l">
              <img :src="item.articleCover" alt="封面">
            </div>
            <div class="article_r_item_r">
              <h3 class="article_r_item_r_title">{{item.title}}</h3>
              <div class="article_r_item_r_info">
                <p>查看(<span>{{item.commentLikeFavorites[0]}}</span>)</p>
                <p>点赞(<span>{{item.commentLikeFavorites[1]}}</span>)</p>
                <p>{{item.createTime}}</p>
              </div>
              <div class="article_r_item_r_detail">
                {{item.introduction}}
              </div>
              <div class="article_r_item_r_tags">
                <li>
                  <span>{{item.category}}</span>
                </li>
                <li>
                  <span>{{item.tag}}</span>
                </li>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'
import HeaderPage from '../../../components/HeaderPage.vue';
import { timeChange } from '../../../hooks/index'
import {
  getArticleApi,
  articleLookApi
} from '../../../service/apiModule/articleApi'

const router = useRouter()

onMounted(() => {
  getArticle()
})

// loading
const loading = ref(false)

const articleData = ref([{
  articleContent: "",
  articleCover: "",
  category: "",
  commentLikeFavorites: [],
  createTime: 0,
  introduction: "",
  tag: "",
  title: "",
  updateTime: 0,
  _id: "",
}])

// 获取文章
const getArticle = async () => {
  loading.value = true
  const { data: res } = await getArticleApi()
  if (res.data) {
    loading.value = false
  }
  if (res.status.code === 200) {
    console.log(res.data)
    res.data.list.forEach((item: any) => {
      item.commentLikeFavorites = item.commentLikeFavorites.split('/')
      const dateRes = timeChange(item.createTime)
      item.createTime = dateRes
    });
    articleData.value = res.data.list
  }
}

// 跳转文章详情
const toDetail = async (id: any) => {
  const { data: res } = await articleLookApi({ id })
  getArticle()
  router.push({
    path: '/article/detail',
    query: { id }
  })
}


</script>

<style lang="scss" scoped>
.articleOuter {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  color: white;
  padding-top: 80px;
  position: relative;
  top: 0;
  background-color: #292929;

  .article {
    width: 80%;
    margin: 0 auto;
    // position: relative;

    .article_r {
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-left: 60px;
      background-color: rgba(151, 151, 151, 0.1);

      .article_r_item {
        width: 20%;
        padding: 10px;
        // display: flex;
        background-color: rgba(151, 151, 151, 0.4);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 20px;
        margin-bottom: 20px;

        .article_r_item_l {
          width: 100%;
          // margin-right: 30px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .article_r_item_r {
          width: 100%;
          font-size: 13px;

          .article_r_item_r_title {
            font-size: 18px;
            text-align: center;
            margin-top: 10px;
          }

          .article_r_item_r_info {
            width: 100%;
            margin: 10px 0;
            display: flex;
            justify-content: space-between;

            p {
              cursor: pointer;

              &:nth-child(1) {
                color: rgb(149, 172, 255)
              }

              &:nth-child(2) {
                color: rgb(255, 98, 0)
              }

              &:nth-child(3) {
                color: rgb(0, 242, 255)
              }

              &:nth-child(4) {
                color: rgba(207, 207, 207, .7)
              }
            }
          }

          .article_r_item_r_tags {
            width: 30%;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            li {
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
</style>